<template>
    <div class="main">
        <div class="film">
            <div class="film_img">
                <image class="film_img_item" :src="filmDetail?.poster" mode="scaleToFill" />
            </div>
            <div class="film_detail">
                <div class="col">
                    <div class="film_name">
                        <span class="name">{{ filmDetail?.name }}</span>
                        <span class="item">{{ filmDetail.item?.name }}</span>
                    </div>
                    <div class="film_grade" v-if="filmDetail?.grade">
                        <span class="grade">{{ filmDetail.grade }}</span>
                        <span class="grade_text">分</span>
                    </div>
                </div>
                <div class="film_category">{{ filmDetail.category }}</div>
                <div class="film_premiere_time">{{ formDate() }}上映</div>
                <div class="film_nation_runtime">{{ filmDetail.nation }} | {{ filmDetail.runtime }}分钟</div>
                <div class="film_synopsis">{{ filmDetail.synopsis }}</div>
                <div class="toggle">
                    <image
                        src="…yr0D7y6uid5t1+XLTFf8Bk+NpPwQfd0oAAAAASUVORK5CYII="
                        mode="scaleToFill" />
                </div>
            </div>
            <div class="actors">
                <div class="actors_title_bar">
                    <div class="actors_title_text">演职人员</div>
                </div>
                <!-- circular -->

                <swiper :display-multiple-items="phoneLength2" class="actors_list" previous-margin="20rpx">
                   
                    <swiper-item class="actors_item" v-for="item in filmDetail?.actors" :key="item.name">
                       
                        <div class="actor_item" v-if="item.name">
                            <image class="actor_img" :src="item.avatarAddress" mode="widthFix,heightFix" />
                            <span class="actor_name">{{ item.name }}</span>
                            <span class="actor_role">{{ item.role }}</span>
                        </div>
                        <span v-else>暂无演职人员</span>
                    </swiper-item>
                </swiper>
            </div>
            <div class="photos">
                <div class="photos_title_bar">
                    <span class="photos_title_text">剧照</span>
                    <span class="photos_to_all">全部({{ filmDetail?.photos?.length }})</span>
                </div>
                <swiper class="photos_scroll_wrapper" :display-multiple-items="phoneLength1" previous-margin="20rpx"
                    next-margin="20rpx">
                    <swiper-item class="photos_item" v-for="item in filmDetail?.photos" :key="item">
                        <image class="photo" :src="item" mode="widthFix" />
                    </swiper-item>
                  
                </swiper>
            </div>
            <div class="go_schedule">选座购票</div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import detail from '@/api/detail';


const phoneLength1 = ref(0);
const phoneLength2 = ref(0);
const filmDetail = ref<any>({})
const getFilmDetail = async function (filmId: string) {
    try {
        let result = await detail.getHotShow(filmId);
        if (result && result.status === 0) {
            filmDetail.value = result.data.film;
            phoneLength1.value = 2;
            phoneLength2.value = 4;
        }
    } catch (error) {
        console.log(error)
    }
}
onLoad((options) => {
    getFilmDetail(options?.filmId);

})


const formDate = function () {
    let date = new Date(filmDetail.value.premiereAt * 1000);
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    return `${year}-${month}-${day}`
}
</script>

<style lang="less" scoped>
.main {
    width: 750rpx;
    height: 1680rpx;
    display: block;
    background-color: #f4f4f4;
    box-sizing: border-box;

    .film {
        width: 750rpx;
        height: 1660rpx;
        position: absolute;

        .film_header {
            position: fixed;
            top: 0;
            width: 750rpx;
            height: 88rpx;
            z-index: 1;
            box-sizing: border-box;
            display: block;

            .goBack {
                display: block;
                height: 60rpx;
                position: absolute;
                left: 10rpx;
                top: 10rpx;

                .header_img {
                    width: 60rpx;
                    height: 60rpx;
                }
            }
        }

        .film_img {
            width: 750rpx;
            height: 420rpx;

            .film_img_item {
                width: 750rpx;
                height: 1065rpx;
                position: absolute;
                overflow: hidden;
                top: -300rpx;
            }
        }

        .film_detail {
            box-sizing: border-box;
            padding: 24rpx 30rpx 30rpx 30rpx;
            width: 750rpx;
            height: 375rpx;
            color: rgb(121, 125, 130);
            background-color: rgb(255, 255, 255);
            margin-bottom: 20rpx;
            position: absolute;

            .col {
                display: flex;
                height: 48rpx;
                width: 750rpx;

                .film_name {
                    width: 580rpx;

                    .name {
                        height: 48rpx;
                        line-height: 48rpx;
                        font-size: 36rpx;
                        color: rgb(25, 26, 27);
                    }

                    .item {
                        display: inline-block;
                        margin-left: 10rpx;
                        padding-left: 4rpx;
                        padding-right: 4rpx;
                        color: rgb(255, 255, 255);
                        background-color: rgb(210, 214, 220);
                        font-size: 24rpx;
                        height: 28rpx;
                        line-height: 28rpx;
                    }
                }

                .film_grade {
                    width: 100rpx;
                    height: 54rpx;
                    text-align: right;

                    .grade {
                        font-size: 36rpx;
                        color: rgb(255, 178, 50);
                    }

                    .grade_text {
                        font-size: 24rpx;
                        color: rgb(255, 178, 50);
                    }
                }
            }

            .film_category {
                margin-top: 8rpx;
                font-size: 26rpx;
                height: 39rpx;
                line-height: 39rpx;
            }

            .film_premiere_time {
                font-size: 26rpx;
                line-height: 39rpx;
                height: 39rpx;
                margin-top: 8rpx;
            }

            .film_nation_runtime {
                font-size: 26rpx;
                line-height: 39rpx;
                height: 39rpx;
                margin-top: 8rpx;
            }

            .film_synopsis {
                height: 72rpx;
                margin-top: 24rpx;
                font-size: 26rpx;
                line-height: 39rpx;
                overflow: hidden;
                /*多行文本溢出隐藏*/
                text-overflow: ellipsis;
                display: -webkit-box;
                /*设置对齐模式*/
                -webkit-box-orient: vertical;
                /*设置多行的行数，示例为2行*/
                -webkit-line-clamp: 2;
            }

            .toggle {
                display: border-box;
                width: 40rpx;
                height: 36rpx;
                text-align: center;
                margin: 10rpx auto;
            }
        }

        .actors {
            width: 750rpx;
            height: 375rpx;
            margin-top: 340rpx;
            box-sizing: border-box;
            color: rgb(44, 62, 80);
            background-color: rgb(255, 255, 255);
            margin-bottom: 20rpx;

            .actors_title_bar {
                width: 750rpx;
                height: 105rpx;
                box-sizing: border-box;

                .actors_title_text {
                    height: 105rpx;
                    line-height: 105rpx;
                    margin-left: 30rpx;
                    color: rgb(25, 26, 27);
                }
            }

            .actors_list {
                height: 270rpx;

                .actors_item {
                    height: 250rpx;

                    .actor_item {
                        width: 170rpx;
                        height: 180rpx;

                        .actor_img {
                            width: 100%;
                            height: 100%;
                            margin-left: 10rpx;
                        }

                        .actor_name {
                            display: block;
                            height: 36rpx;
                            line-height: 36rpx;
                            text-align: center;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            color: rgb(25, 26, 27);
                            margin-top: 10rpx;
                            font-size: 24rpx;
                        }

                        .actor_role {
                            display: block;
                            height: 36rpx;
                            line-height: 36rpx;
                            text-align: center;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            color: rgb(121, 125, 130);
                            font-size: 24rpx;
                        }
                    }
                }
            }
        }

        .photos {
            width: 750rpx;
            height: 354rpx;
            box-sizing: border-box;
            margin: 20rpx 0rpx;
            margin-bottom: 120rpx;
            background-color: rgb(255, 255, 255);

            .photos_title_bar {
                width: 690rpx;
                height: 124rpx;
                padding: 0px 30rpx;

                .photos_title_text {
                    display: inline-block;
                    height: 124rpx;
                    line-height: 124rpx;
                    font-size: 32rpx;
                    color: rgb(25, 26, 27);
                    float: left;
                }

                .photos_to_all {
                    display: inline-block;
                    height: 124rpx;
                    line-height: 124rpx;
                    font-size: 26rpx;
                    color: rgb(121, 125, 130);
                    float: right;
                }
            }

            .photos_scroll_wrapper {
                height: 230rpx;

                .photos_item {
                    height: 200rpx;

                    .photo {

                        margin-left: 20rpx;
                        margin-right: 20rpx;
                        height: 100%;
                        width: 100%;
                    }
                }
            }
        }

        .go_schedule {
            z-index: 100;
            width: 750rpx;
            height: 100rpx;
            background-color: rgb(255, 95, 22);
            position: fixed;
            bottom: 0;
            line-height: 100rpx;
            font-size: 32rpx;
            text-align: center;
            color: rgb(255, 255, 255);
        }
    }
}
</style>